<template>
  <section class="all-news-section">
    <!-- AllNews.vue -->
<router-link to="/" class="back-home">← 返回首页</router-link>

    <div class="page-header">
      <h2>全部新闻资讯</h2>
    </div>

    <div class="news-list">
      <div v-for="news in newsList" :key="news.NewsID" class="news-card">
        <div class="news-image">
          <img :src="news.ImageURL || '/mock-bg.jpg'" alt="新闻图片" />
        </div>
        <div class="news-content">
          <h3>{{ news.Title }}</h3>
          <p>{{ news.Summary }}</p>
          <span class="news-date">{{ formatDate(news.ReleaseDate) }}</span>
        </div>
      </div>
    </div>

    <div v-if="newsList.length === 0" class="no-data">
      暂无新闻资讯。
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import http from '@/utils/http'

const newsList = ref([])

const formatDate = (str) => {
  const d = new Date(str)
  return d.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}

onMounted(async () => {
  try {
    const res = await http.get('/news')
    newsList.value = res.data.filter(item => item.NewsType === '新闻资讯')
  } catch (err) {
    console.error('获取新闻失败', err)
  }
})
</script>

<style scoped>
.all-news-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 60px 20px 100px;
  background-color: #f9f7f4;
  font-family: "Microsoft YaHei", sans-serif;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h2 {
  font-size: 32px;
  color: #2e1c0e;
  font-weight: bold;
  position: relative;
  display: inline-block;
}

.page-header h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  background: linear-gradient(to right, #c2956d, #e4c29a);
  margin: 16px auto 0;
  border-radius: 2px;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 50px;
}

.news-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.news-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.news-content {
  padding: 24px;
}

.news-content h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 12px;
}

.news-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 16px;
}

.news-date {
  font-size: 12px;
  color: #999;
}

.no-data {
  text-align: center;
  font-size: 16px;
  color: #999;
  margin-top: 40px;
}

.back-home {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  color: #c2956d;
  border: 1px solid #c2956d;
  border-radius: 24px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-home:hover {
  background-color: #c2956d;
  color: white;
}
</style>